
<template>
  <!--登录界面-->
  <div style="height: 120vh; overflow: hidden; position: relative;">
    <img src="/login/login-background.jpg" style="filter: blur(4px);width: 100%;height: 100%">
    <el-card style="position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
     background-color: rgba(255, 255, 255, 0.8); padding: 10px; width: 350px;">
      <el-form label-position="top" v-if="currentForm === 'login'">
        <h3 style="text-align: center;" >用户登录</h3>
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入密码" v-model="user.password"></el-input>
        </el-form-item>
        <el-link type="warning" @click="toggleForm('usephone')" >手机号登录</el-link>
        <el-link type="info" style="left: 172px" @click="toggleForm('forgot')" >忘记密码？</el-link>
        <el-form-item >
          <el-link  style="left: 180px" type="info" @click="toggleForm('new')" >没有账号？注册账号</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="login" @keydown.enter="login">登录</el-button>
        </el-form-item>

      </el-form>

      <div v-else-if="currentForm === 'register'">
        <h3>注册</h3>
        <el-input placeholder="请输入用户名"></el-input>
        <el-input placeholder="请输入密码" type="password"></el-input>
        <el-input placeholder="请再次输入密码" type="password"></el-input>
        <el-button type="primary" style="width: 100%">注册</el-button>
      </div>
      <div v-else-if="currentForm === 'forgot'">
        <h3>忘记密码</h3>
        <el-input placeholder="请输入用户名"></el-input>
        <el-button type="primary" style="width: 100%">重置密码</el-button>
      </div>
    </el-card>


  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const user =ref({username:'',password:''})
const login=()=>{
  axios.post(BASE_URL+'/v1/user/login',user.value).then((response)=>{
    if (response.data.code ==2000){
      ElMessage.success('登录成功!');
      localStorage.setItem('user',JSON.stringify(response.data.data));
      router.push('/');//登录成功后跳转至首页,后重定向至用户列表页
    }else {
      ElMessage.error(response.data.msg);
      user.value={username: '', password: ''};
    }
  })
}

const currentForm = ref('login');

const toggleForm = (formType) => {
  currentForm.value = formType;
};



</script>


<style scoped>

</style>